<template>
	<div class="alarm-analysis">
		<!-- <div v-if="props.loading" class="loading-page">
			<a-spin size="large" tip="加载中..." />
		</div> -->
		<div class="frequency">
			<div id="frequencyChart" :style="{ width: '230px', height: '230px' }"></div>
			<NumberAnimation :numm="props.analysisData.allAlarmCount" :num-len="cAllAlarmCountLength" :none-divide="true" />
			<img src="@/global-assets/imgs/alarm-analysis-echart.png" alt="" />
		</div>
		<div class="frequency-analysis">
			<div :key="index" v-for="(item, index) in props.analysisData.alarmAnalysisVoList" class="frequency-list">
				<span :style="{ background: color[index] }"><i></i></span>
				<p class="title">{{ item.aiSrvName }}</p>
				<p class="num">{{ item.alarmCount }}</p>
				<p class="rate">{{ item.alarmRatio }}%</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="AlarmAnalysis">
import * as echarts from 'echarts';
import { NumberAnimation } from '../index';
import type { TsEchart } from '../../type';
interface TsAnalysisListItem {
	aiSrvId: number;
	aiSrvName: string;
	alarmCount: number;
	alarmRatio: number;
}
// 具体统计类型
interface TsAnalysisListData {
	alarmAnalysisVoList: TsAnalysisListItem[];
	allAlarmCount: number;
}
type TsProps = {
	loading: boolean;
	analysisData: TsAnalysisListData;
};

const props = withDefaults(defineProps<TsProps>(), {
	loading: false,
	analysisData: () => ({
		alarmAnalysisVoList: [],
		allAlarmCount: 0
	})
});

// 计算全部报警总数的字段长度
const cAllAlarmCountLength = computed(
	() => (Reflect.has(props.analysisData, 'allAlarmCount') && props.analysisData.allAlarmCount.toString().length) || 0
);
const color = ref(['#3472FF', '#6DFFB5', '#FCA846', '#FBD424', '#21FDFF', '#48B2DA']);
// 饼图
const myChart: any = ref('');
const frequencyChart = (): void => {
	const data: TsEchart[] = [];
	const dataShadow: TsEchart[] = [];
	props.analysisData.alarmAnalysisVoList.forEach((ele, index) => {
		data.push({ name: ele.aiSrvName + index, value: ele.alarmCount });
		dataShadow.push({ name: '', value: ele.alarmCount });
	});
	const option = {
		title: {
			text: '报警记录',
			left: 'center',
			top: '35%',
			textStyle: {
				color: 'rgba(255, 255, 255, 0.6)',
				fontSize: 14,
				align: 'center'
			}
		},

		series: [
			{
				name: '人员类型',
				type: 'pie',
				emphasis: { scale: false },
				legendHoverLink: false,
				radius: ['78%', '85%'],
				color: ['rgba(42, 48, 65)'],

				itemStyle: {
					borderWidth: 3,
					borderColor: 'rgba(12, 18, 38, 1)'
				},
				label: {
					show: false
				},
				labelLine: {
					show: false
				},
				tooltip: {
					show: false
				},

				data: dataShadow
			},
			{
				name: '人员类型',
				type: 'pie',
				radius: ['85%', '95%'],
				color: color.value,

				itemStyle: {
					borderWidth: 3,
					borderColor: 'rgba(12, 18, 38, 1)'
				},
				labelLine: {
					show: false
				},
				label: {
					show: false
				},
				data: data
			}
		]
	};
	nextTick(() => option && myChart.value.setOption(option));
};
const watchStop = watch(
	() => props.analysisData,
	() => {
		frequencyChart();
	},
	{
		immediate: true,
		deep: true
	}
);
onMounted(() => {
	const dom = document.getElementById('frequencyChart');
	myChart.value = echarts.init(dom); // 初始化echarts实例
});
onUnmounted(() => {
	watchStop();
});
</script>

<style lang="less" scoped>
.alarm-analysis {
	.frequency {
		img {
			position: absolute;
			top: 114px;
			left: 87px;
		}
	}

	.loading-page {
		position: absolute;
		top: 0;
		z-index: 9999;
		display: flex;
		width: 100%;
		height: 100%;
		border-radius: 6px;
		background-color: rgba(23, 40, 69, 0.96);
		transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
		align-items: center;
		justify-content: center;
		backdrop-filter: saturate(244%) blur(5px);

		.ant-spin {
			color: rgba(24, 104, 233, 0.65);
			transform: scale(0.8);
		}
	}

	#frequencyChart {
		margin: 30px auto;
	}

	.frequency-analysis {
		padding: 0 40px 12px;
		font-size: 14px;

		.frequency-list {
			display: flex;
			margin-bottom: 15px;
			border-right: 2px solid #94bfff47;
			background: linear-gradient(0deg, rgba(148, 191, 255, 0.1), rgba(148, 191, 255, 0.1));

			span {
				width: 14px;
				height: 14px;
				margin: 10px 16px 0 12px;
				border-radius: 100%;
				text-align: center;

				i {
					display: block;
					width: 5px;
					height: 5px;
					margin: 5px auto;
					border-radius: 100%;
					background-color: rgb(27, 36, 58);
				}
			}

			.title {
				width: 100px;
				line-height: 34px;
				color: rgba(255, 255, 255, 0.8);
			}

			.num {
				width: 40px;
				line-height: 34px;
				text-align: left;
				color: #b5cbd9;
			}

			.rate {
				height: 14px;
				margin-top: 10px;
				margin-left: 13px;
				border-left: 1px solid #45bbd3;
				padding: 0 13px 0 24px;
				line-height: 14px;
				color: #45bbd3;
			}
		}
	}
}
</style>
